<style lang="scss" scoped>
@import '../../assets/css/_variables.scss';
@import '../../assets/css/_functions.scss';
/**/
 .spu-container {
  position: fixed;
  z-index: 100;
  bottom: 0;
  width: 100%;
  background: #ffffff;
  transform: translateX(0) translateY(100%);
  -webkit-transform: translateX(0) translateY(100%);
  	.header {
	  	background: #fafbfc;
	  	min-height: rem(100);
	  	.header-img {
		  	float: left;
		  	width: rem(80);
		  	height: rem(100);
		  	margin-top: rem(10);
		  	margin-left: rem(10);
		  	img {
			  	width: rem(80);
			  	height: rem(80);
			  	border: 1px solid #efeff4;
			}
		}
		.header-content {
		  	padding-top: rem(10);
		  	padding-left: rem(100);
		  	.header-content-title {
		  		font-size: rem(14);
		  		line-height: rem(15);
		  		font-weight: 800;
		  		color: #666666;
			}
			.header-content-content {
			  	position: relative;
			  	width: rem(250);
			  	.content-action {
				  	position: absolute;
				  	top: 0;
				  	left: 0;
				  	width: rem(35);
				  	height: 100%;
				  	font-size: rem(10);
				  	line-height: rem(15);
				  	color: #03a9f4;
				}
				.content-content {
				  	padding-left: rem(35);
				  	font-size: rem(10);
				  	line-height: rem(15);
				  	color: #666666;
				}
			}
		}
		.header-content-price {
  			line-height: rem(30);
  			.price-before {
			  	font-size: rem(14);
			  	color: #ff6a6a;
			}
			.price-after {
  				font-size: rem(11);
  				color: #999999;
  				text-decoration: line-through;
			}
		}
	}
	ul.content-list {
	  	background: #ffffff;
	  	padding-top: rem(12.5);
	  	padding-left: rem(80);
	  	div {
		  	position: relative;
		  	.spu-title {
			  	position: absolute;
			  	top: 0;
			  	left: rem(-80);
			  	padding-left: rem(12.5);
			  	text-align: left;
			  	font-size: rem(12);
			  	color: #999999;
			  	height: rem(25);
			  	line-height: rem(25);
			}
			div[status] {
			  	box-sizing: border-box;
			  	padding: 0 rem(15);
			  	margin-right: rem(10);
			  	margin-bottom: rem(10);
			  	float: left;
			  	height: rem(25);
			  	line-height: rem(25);
			  	text-align: center;
			  	font-size: rem(12);
			  	color: #333333;
			}
			div[status='1'] {
			  	border: 1px solid #03a9f4;
			  	color: #03a9f4;
			  	border-radius: 3px;
			  	background-image: url("http://s1.cximg.com/cms/wap/resource/chexiangjiaM/serviceDetail/images/XBYSPU/label_26c4c3141ead2fd258922ed54d98808b.png");
			  	background-repeat: no-repeat;
			  	background-position: bottom right;
			  	background-size: rem(12.5) rem(12.5);
			}
			div[status='0'] {
			  	border: 1px solid #03a9f4;
			  	color: #999999;
			  	border-radius: 3px;
			}
			div[status='2'] {
			  	border: 1px dotted #999999;
			  	color: #999999;
			  	border-radius: 3px;
			}
			&:after {
			  	display: block;
			  	content: '';
			  	height: 0;
			  	line-height: 0;
			  	visibility: hidden;
			  	clear: both;
			}
		}
	}
	.footer {
	  	width: 100%;
	  	margin-top: rem(20);
	  	.btn {
	 	 	width: 100%;
		  	height: rem(45);
		  	background: #03a9f4;
		  	font-size: rem(16);
		  	text-align: center;
		  	letter-spacing: rem(7.5);
		  	color: #ffffff;
		  	border-radius: 0;
		}
	  	
	}
}
 .edit-mask {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background: rgba(0, 0, 0, 0.3);
}
 .slideUp {
  animation: slideUp 400ms ease-in forwards;
  -webkit-animation: slideUp 400ms ease-in forwards;
}
@-webkit-keyframes slideUp {
  0% {
    transform: translateX(0) translateY(100%);
    -webkit-transform: translateX(0) translateY(100%);
  }
  100% {
    transform: translateX(0) translateY(0);
    -webkit-transform: translateX(0) translateY(0);
  }
}
 .slideDown {
  animation: slideDown 400ms ease-in forwards;
  -webkit-animation: slideDown 400ms ease-in forwards;
}
@-webkit-keyframes slideDown {
  0% {
    transform: translateX(0) translateY(0);
    -webkit-transform: translateX(0) translateY(0);
  }
  100% {
    transform: translateX(0) translateY(100%);
    -webkit-transform: translateX(0) translateY(100%);
  }
}

</style>
<template>
	<div class="spu-common">
	  	<div id="edit-container" class="spu-container" v-bind:class="showEditContainerObj">
	    	<div class="header">
	    		<div class="header-img"><img id="header-img" src=""/></div>
	    		<div class="header-content">
	    			<div class="header-content-title" id="header-content-title">
	    				半合成机油
	    			</div>
	    			<div class="header-content-price">
	    				<span class="price-before" id="header-content-price-after">¥0.00</span>
	    				<span class="price-after" id="header-content-price-before" >¥0.00</span>
	    			</div>
	    			<div class="header-content-content">
	    				<div class="content-action">已选</div>
	    				<div class="content-content" id="header-content-content"></div>
	    			</div>
	    		</div>
	    	</div>
	    	<ul id="spuInfo" class="content-list">
	    		<div id="ld1" v-for="levelList in contentList" >
	    			<div class="spu-title">{{ titleList[$index] }}：</div>
	    			<div id="" v-for="level  in levelList" class="level1" v-bind:status="level.status" v-on:click.self="changeStatus($event,$index,$parent.$index, level.status, level.name)">{{level.name}}</div>
	    		</div>
	    	</ul>
	    	<div class="footer">
	    		<input id="select-btn-ok" type="button" class="btn" v-on:click="changeService" value="确定" />
	    	</div>
		</div>
		<div id="edit-mask" class="edit-mask" v-bind:style="showEditMaskObj"></div>
	</div>
</template>

<script>
export default {
	
  	name: 'spu-common',
  	components: {
  		
  	},
  	data () {
	    return {
	    	showEditContainerObj: {
	    		'slideUp': true,
	    		'slideDown': false
	    	},
	    	showEditMaskObj: {
	    		display: 'block'
	    		//mask放入外层div中不用指定height高度
	    		//height: window.outerHeight+'px'
	    	},
	    	spuObj: {},
	    	titleList: [],
	    	contentList: [],
	    	serviceMap: {} 
	    }
  	},
  	events: {
  		'spu-common-show' (e) {
  			console.log("e:"+e);
  			this.showSpuCommon();
  		}
  	},
  	methods: {
  		showSpuCommon () {
	  		console.log("showSpuCommon");
	  		this.showEditContainerObj['slideUp'] = true;
	  		this.showEditContainerObj['slideDown'] = false;
	  		this.showEditMaskObj['display'] = 'block';
	  	},
	  	closeSpuCommon () {
	  		console.log("closeSpuCommon");
	  		this.showEditContainerObj['slideUp'] = false;
	  		this.showEditContainerObj['slideDown'] = true;
	  		this.showEditMaskObj['display'] = 'none';
	  	},
	  	changeService () {
	  		console.log("changeService");
	  		this.closeSpuCommon();
	  	},
	  	renderSpuList (spuObj) {
	  		var _titleList = [];
	  		var _contentList = [];
	  		var _serviceMap = {};
	  		var _this = this;
	  		console.log("spuObj:"+ JSON.stringify(spuObj));
	  		function deepObj (o, currentDeep) {
	  			for (var p in o) {
	  				console.log(p);
	  				console.log( Object.prototype.toString.call(o[p]));
	  				console.log( JSON.stringify(o[p]));
	  				if (p === 'title') {
	  					_titleList.push(o[p]);
	  				}
	  				if (p === 'list') {
	  					if (Object.prototype.toString.call(o[p]) === '[object Array]') {
	  						console.log("currentDeep:"+currentDeep)
				  			//currentDeep 当前遍历的深度
				  			if (_contentList[currentDeep] === undefined) {
				  				//初始化一二三四 数组
								_contentList[currentDeep] = [];
				  			}
		  					var list = o[p];
		  					console.log(list);
		  					for (var i in list) {
		  						console.log("遍历对象了");
			  					console.log(list[i].content);
			  					
			  					if (Object.prototype.toString.call(list[i].content) === '[object Object]') {
		  							//深度加深一层
		  							_contentList[currentDeep].push(list[i].name);
		  							deepObj(list[i].content, currentDeep+1);
		  							
		  						}else {
		  							//已经到最底层了 SOOO1 SOOO2 添加服务code
		  							_contentList[currentDeep].push(list[i].name);
		  							//填充map对象
		  							var key = getKey(_contentList);
		  							if (_serviceMap[key] ===  undefined) {
		  								_serviceMap[key] = [list[i].name];
		  							} else {
		  								_serviceMap[key].push(list[i].name);
		  							}
		  						}
		  					}
		  				}else {
		  					
		  				}
	  				}
	  				
	  			}
	  		}
	  		deepObj(spuObj, 0);
	  		function getKey(_contentList) {
	  			//嘉实多-全合成- 4L
	  			var _key = '';
	  			for (var i= 0; i< _contentList.length-1; i++) {
	  				var list = _contentList[i];
	  				_key += list[list.length-1];
	  			}
	  			return _key;
	  		}
	  		function uniqueList (list) {
	  			list = list || [];
	  			var _list = [];
	  			for (var i=0; i<=list.length-1; i++) {
	  				if (!(_list.indexOf(list[i]) !== -1)) {
	  					_list.push(list[i]);
	  				}
	  			}
	  			return _list;
	  		}
	  		console.log("查看contentList");
	  		console.log( JSON.stringify(_contentList));
	  		_this.titleList = _titleList;
	  		var __contentList = _contentList.slice(0, _contentList.length-1);
	  		for (var i=0; i<=__contentList.length-1; i++) {
	  			__contentList[i] = uniqueList(__contentList[i]);
	  		}
	  		console.log( JSON.stringify(__contentList));
	  		//contentList改造设置默认值
	  		function setContentListStatus (contentList) {
	  			for (var i=0; i<= contentList.length-1; i++) {
	  				var list = contentList[i];
	  				for (var j=0; j<list.length; j++) {
	  					var name = list[j];
	  					//0未选中 1选中  2不存在
	  					list[j] = {'name': name, 'status': '0'};
	  				}
	  			}
	  		}
	  		setContentListStatus(__contentList);
	  		_this.contentList = __contentList;
	  		_this.serviceMap = _serviceMap;
	  		console.log( JSON.stringify(_serviceMap));
	  	},
	  	changeStatus ($event,index,parntIndex, status, name) {
	  		console.log($event,index, parntIndex,status,name);
	  		var target = $event.target;
	  		var _contentList = this.contentList;
	  		var _currKey = '';
	  		for (var i=0; i<=_contentList.length-1; i++) {
	  			var _currlevelLsit = _contentList[i];
	  			for (var j=0; j<=_currlevelLsit.length-1 ; j++) {
	  				//重置当前行
	  				if (i === parntIndex) {
	  					var _currLevel = _currlevelLsit[j];
	  					_currLevel.status = '0';
	  					if (index === j) {
		  					_currLevel.status = '1';
			  			}
	  				}
	  			}
	  		}
	  		for (var i=0; i<=_contentList.length-1; i++) {
	  			var _currlevelLsit = _contentList[i];
	  			for (var j=0; j<=_currlevelLsit.length-1 ; j++) {
	  				var _currLevel = _currlevelLsit[j];
	  				//封装map key
	  				if (_currLevel.status === '1') {
	  					_currKey += _currLevel.name;
	  				}
	  			}
	  		}
	  		var _serviceMap = this.serviceMap;
	  		if (_serviceMap[_currKey]) {
	  			console.log(_currKey);
	  			console.log("有服务");
	  		}else {
	  			console.log(_currKey);
	  			console.log("无服务");
	  		}
	  	}
  	},
  	filters: {
  	
  	},
  	created () {
    	console.log("created");
  	},
  	ready () {
  		console.log("ready");
  		this.$on('spu-common-show', function (ee) {
  			//添加回调函数
  			console.log("ee:"+ee);
  		});
  		//请求spu数据
  		this.$http({url: '/static/json/spu-common.json', data:{'param1': 0}, emulateJSON: true, method: 'GET'}).then(function (response) {
            //
            console.log("response"+ JSON.stringify(response.body));
            this.spuObj= response.body;
            this.renderSpuList(this.spuObj);
       });
  	},
  	destroyed () {
    	console.log("destroyed");
  	}
}
</script>
